import {
  computed,
  defineComponent,
  inject,
  reactive,
  ref,
  shallowRef,
  watchEffect,
  type Ref,
} from 'vue'
import { queryBusinessSceneListApi } from '@/api/ai-agent/detail'
import Prompt from './components/prompt'
import Template from './components/template'
import Avarat from './components/avatar'
import fold from '@/assets/images/ai-agent/fold.png'
import { useUserStore } from '@/stores/user'
import { BusinessTypeList } from '@/views/ai-agent/const'

export default defineComponent({
  name: 'baseConfig',
  setup(_, { expose }) {
    const user = useUserStore()
    const agentId = inject<Ref>('agentId')
    const foldVisible = shallowRef(false)
    const model = reactive({
      avatar: [],
      agentName: '',
      agentDes: '',
      businessType: '',
      businessScene: '',
      prompt: {
        prompt: '',
        limitPrompt: '',
        rolePrompt: '',
        targetPrompt: '',
      },
    })
    const businessSceneOptions = ref([])

    const getPrompt = computed(() => {
      return {
        agentPrompt: '',
        limitPrompt: '',
        rolePrompt: '',
        targetPrompt: '',
      }
    })

    const getVariableList = computed(() => {
      return []
    })

    const queryBusinessSceneList = async () => {
      try {
        const params = {
          companyId: user.companyId,
        }
        const { data } = await queryBusinessSceneListApi(params)
        businessSceneOptions.value = data
      } catch (error) {
        console.error('获取业务场景列表失败', error)
      }
    }

    watchEffect(() => {
      if (agentId.value) {
        queryBusinessSceneList()
      }
    })

    const getForm = () => {}

    const setForm = (form) => {
      Object.assign(model, form)
    }

    expose({
      getForm,
      setForm,
    })

    return () => (
      <>
        <div
          class={{
            'position-relative px-28px pt-32px transition-width duration-300': true,
            'w-calc-/3': !foldVisible.value,
            'w-144px!': foldVisible.value,
          }}
        >
          <h1 class="fw-600 color-#242934 font-size-18px m-b-36px">基本配置</h1>
          <i class="position-absolute right-0 top-34px w-14px h-22px bg-#F5F7FB border-rd-[4px_0_0_4px]">
            <img
              class={{
                'w-14px': true,
                'h-22px': true,
                'cursor-pointer': true,
                transition: 'transform 0.3s',
                'transform-rotate-180': foldVisible.value,
              }}
              src={fold}
              alt="折叠"
              onClick={() => (foldVisible.value = !foldVisible.value)}
            />
          </i>
          <div
            class={{
              'transition-opacity h-calc--56px overflow-y-auto': true,
              'op-100': !foldVisible.value,
              'op-0': foldVisible.value,
            }}
          >
            <a-form
              class="[&_label]:w-100%"
              model={model}
              layout="vertical"
              labelCol={{ span: 24 }}
            >
              <a-form-item label="图标">
                <Avarat model={model.avatar} onUpdate:model={(value) => (model.avatar = value)} />
              </a-form-item>
              <a-form-item label="智能体名称">
                <a-input v-model:value={model.agentName} />
              </a-form-item>
              <a-form-item label="智能体描述">
                <a-input v-model:value={model.agentDes} />
              </a-form-item>
              <a-form-item label="业务类型">
                <a-select v-model:value={model.businessType}>
                  {BusinessTypeList.map((i) => (
                    <a-select-option value={i.value}>{i.label}</a-select-option>
                  ))}
                </a-select>
              </a-form-item>
              <a-form-item label="业务场景">
                <a-select v-model:value={model.businessScene}>
                  {businessSceneOptions.value.map((i) => (
                    <a-select-option value={i.id}>{i.labelName}</a-select-option>
                  ))}
                </a-select>
              </a-form-item>
              <Prompt model={model.prompt} onUpdate:model={(value) => (model.prompt = value)} />
            </a-form>
            <Template prompt={getPrompt.value} variableList={getVariableList.value} />
          </div>
        </div>
      </>
    )
  },
})
